<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item
      label="帐号"
      field="username"
      :rules="[{required:true,message:'帐号不能为空'}]"
      :validate-trigger="['blur']"
    >
      <a-input v-model="formData.username" placeholder="请输入用户名" allow-clear />
    </a-form-item>
    <a-form-item
      label="姓名"
      field="name"
      :rules="[{required:true,message:'姓名不能为空'}]"
      :validate-trigger="['blur']"
    >
      <a-input v-model="formData.name" placeholder="请输入姓名" allow-clear />
    </a-form-item>
    <a-form-item label="昵称" field="nickName">
      <a-input v-model="formData.nickName" placeholder="请输入昵称" allow-clear />
    </a-form-item>
    <a-form-item
      label="手机号"
      field="tel"
      :rules="[{required:true,message:'手机号不能为空'}]"
      :validate-trigger="['blur']"
    >
      <a-input
        v-model="formData.tel"
        placeholder="请输入手机号"
        :max-length="11"
        show-word-limit
        allow-clear
      />
    </a-form-item>
    <a-form-item
      label="性别"
      field="gender"
      :rules="[{required:true,message:'性别不能为空'}]"
      :validate-trigger="['blur']"
    >
      <a-radio-group v-model="formData.gender">
        <a-radio :value="1">男</a-radio>
        <a-radio :value="0">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="邮箱" field="email">
      <a-input v-model="formData.email" placeholder="请输入邮箱" allow-clear />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button
          type="primary"
          @click="handleSubmit"
          :loading="loading"
        >{{ $t('userSetting.save') }}</a-button>
        <a-button type="secondary" @click="handleReset">{{ $t('userSetting.reset') }}</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { updateSysUser, UserData } from '@/api/sys/user';
import { useUserStore } from '@/store';

const { t } = useI18n();
const userStore = useUserStore();

const loading = ref(false);

// 表单
const formRef = ref<FormInstance>();
const formData = ref<UserData>({});

// 保存
const handleSubmit = async () => {
  formRef.value.validate().then((result: any) => {
    // 校验不通过
    if (result) {
      return;
    }
    loading.value = true;
    delete formData.value.password;
    updateSysUser(formData.value)
      .then(() => {
        userStore.info();
        Message.success(t('operations.success'));
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

// 重置
const handleReset = async () => {
  await formRef.value?.resetFields();
};

// 初始化
const initData = () => {
  formData.value = {
    id: userStore.id,
    username: userStore.username,
    name: userStore.name,
    nickName: userStore.nickName,
    tel: userStore.tel,
    gender: userStore.gender,
    email: userStore.email,
  };
};

initData();
</script>

<style scoped lang="less">
.form {
  width: 540px;
  margin: 0 auto;
}
</style>
